<template>
	<view class="detail">
		<headertop title="详情" :back1="back1" str1="oridei"></headertop>
		<up-swiper height="375px" :list="list6" @click="clickloop" @change="e => currentNum = e.current" autoplay
			circular="true" indicatorStyle="right: 20px">
			<template #indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</template>
		</up-swiper>
		<view class="spinfo">
			<view class="jiageinfo">
				<image :src="_static('/images/Rectangle 22980@2x.png')" class="jiageinfoback" mode="">
				</image>
				<view class="jiageline">
					<view class="jigae">
						<view class="">
							￥
							<span style="font-size:48rpx ;">{{jigaefun(zuliObj['price'])}}.</span>
							<span style="font-size:30rpx ;">{{jigaefun(zuliObj['price'],'后')}}</span>
						</view>

						<view class="memberjiage">
							押金：{{zuliObj['deposit']}}
						</view>
					</view>

					<view class="gnq">
						<button class="righttex" style="margin-right: 36rpx;" open-type="share">
							<image :src="_static('/images/Frame@2x(42).png')" class="rightteximg" mode="">
							</image>
						</button>
						<!-- 	<image style="margin-left: 36rpx;" src="https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/Frame@2x(44).png"
							@click="collectfun" class="gnqitem" mode="">
						</image> -->
						<!-- <image style="margin-left: 36rpx;"
							src="https://chunchi.oss-cn-beijing.aliyuncs.comhttps://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/static/sccc.png" class="gnqitem"
							@click="collectfun" mode="" v-else>
						</image> -->
					</view>
				</view>
			</view>
			<view class="shangpinfo">
				<view class="shangpinfocenter">
					<view class="title">
						{{zuliObj['title']}}
					</view>
					<view class="text">
						{{zuliObj['subtitle']}}
					</view>
					<!-- <view class="text" v-if="shangpobj.subtitle.length<40">
							{{shangpobj.subtitle}}
						</view>
						<view class="text" v-if="shangpobj.subtitle.length>40">
							{{ flag?shangpobj.subtitle:shangpobj.subtitle.slice(0,40)+'...'}}
						</view> -->
					<!-- 	<view class="open" v-if="shangpobj.subtitle.length>40" @click="flag=!flag">
							{{flag?'收起':'展开查看更多'}} <up-icon :name="flag?'arrow-up':'arrow-down'" color="#0077BE" size="14"
								bold></up-icon>
						</view> -->
				</view>
				<view class="jiange">

				</view>
				<view class="canshubox">
					<view class="ctente">
						<span style="color:#1D2129 ;" @click="open('配送')">配送：</span>
						<span style="color:#86909C;">{{servicefun(zuliObj['dispatch_type'])}}</span>
					</view>
				</view>
				<view class="canshubox">
					<view class="ctente">
						<span style="color:#1D2129 ;" @click="open('参数')">参数：</span>
						<span style="color:#86909C;">{{paramsfun(zuliObj['params'])}}</span>
					</view>
				</view>
				<view class="jiange" style="margin-top: 0rpx;">

				</view>
				<view class="spdetail">
					<view class="titleline">
						<image :src="_static('/images/Group 11590@2x.png')" mode="" class="imh"></image>
						<span>商品详情</span>
						<image :src="_static('/images/Group 11590@2x.png')" mode="" class="imh"></image>
					</view>
					<view class="content">
						<up-parse :content="zuliObj.content"></up-parse>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 196rpx;">

		</view>
		<view class="fixedbox">
			<view class="centerbox" @click="ljzy">
				立即租用
			</view>
		</view>
		<image :src="_static('/images/Group 11589@2x.png')" @click="zhid" v-if="back1" class="zhidingbtn" mode="">
		</image>
		<detail-cell-params ref="paramsref" v-model="zuliObj.params" />
		<detail-cell-service ref="serviceref" v-model="zuliObj.service" />
		<userlogin ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import detailCellParams from './components/detail/detail-cell-params.vue';
	import detailCellService from './components/detail/detail-cell-service.vue';
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const statusBarHeight = ref('')
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import ulm, {
		$api
	} from '@/ulm';
	const barHeight = ref('')
	const back1 = ref('')
	const serviceref = ref(null)
	const paramsref = ref(null)
	const zuliObj = ref({})
	const currentNum = ref(0)
	const list6 = ref([
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png',
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png',
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png'
	]);
	onLoad((opt) => {
		init(opt.id)
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})

	function ljzy() {
		uni.navigateTo({
			url: '/sub_shoppingmal/index/zuliinfo?id=' + zuliObj.value['id']
		})
	}
	async function init(id) {
		const res = await $api.rentdetail({
			id
		})
		if (res.code == 1) {
			zuliObj.value = res.data
			list6.value = zuliObj.value.images
		}
	}

	function zhid() {
		uni.pageScrollTo({
			scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
			duration: 300 // 滚动动画的时长
		})
	}

	function open(str) {
		if (str == '服务') {
			serviceref.value.open()
		} else {
			paramsref.value.open()
		}
	}

	function clickloop(e) {
		uni.previewImage({
			current: e, // 当前显示图片的http链接
			urls: list6.value // 可以预览多张图片，只需将urls数组中的URLs替换即可
		});
	}


	function jigaefun(str1, strr) {
		let number = Number(str1).toFixed(2)
		let str = number.toString(); // 转换为字符串 "100.00"
		let parts = str.split('.'); // 按小数点分割
		let integerPart = parts[0]; // "100"
		let decimalPart = parts[1] || "00"; // "00"（如果没有小数部分，默认 "00"）
		if (!strr) {
			return integerPart
		} else {
			return decimalPart
		}

	}

	function servicefun(arr) {
		if (!arr) return ''
		var names = arr.split(',')
		if (names.length == 2) {
			return '快递/自取'
		} else {
			if (names == 'offline') {
				return '自取'
			} else {
				return '快递'
			}
		}
	}

	function paramsfun(arr) {
		if (!arr) return ''
		var names = arr.map(item => item.title)
		return names.join(' · ')
	}
</script>

<style lang="scss">
	.zhidingbtn {
		width: 84rpx;
		height: 84rpx;
		position: fixed;
		bottom: 20%;
		right: 0%;
	}

	button {
		border: none !important;
		align-items: center;
		overflow: auto !important;
		background: none !important;
		background-color: none !important;
		background-size: 100% 138% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0rpx !important;
		-webkit-tap-highlight-color: none !important;
		overflow: hidden !important;

		&:after {
			background: none !important;
			border: none;
			background-color: none !important;
			display: none !important;
		}
	}

	.detail {
		width: 100%;
		overflow: hidden;

		.fixedbox {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			overflow: hidden;
			position: fixed;
			bottom: 0%;
			z-index: 999;

			.btnss1 {
				width: 538rpx;
				display: flex;
				align-items: center;
				margin-left: 52rpx;

				.leftbtn {
					width: 270rpx;
					height: 78rpx;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
					text-align: center;
					line-height: 78rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #2AB4F5;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 268rpx;
						height: 78rpx;
						position: absolute;
						z-index: -1;
					}

				}

				.rightbtn {
					width: 268rpx;
					height: 78rpx;
					border-radius: 0 39rpx 39rpx 0;
					text-align: center;
					line-height: 78rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFAF5;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 268rpx;
						height: 78rpx;
						position: absolute;
						z-index: -1;
					}
				}
			}

			.centerbox {
				width: 686rpx;
				margin: auto;
				margin-top: 26rpx;
				margin-bottom: 78rpx;
				height: 92rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFAF5;
				background: #2AB4F5;
				text-align: center;
				line-height: 92rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}

		.spinfo {
			width: 100%;
			overflow: hidden;
			margin-top: -10rpx;

			.shangpinfo {
				width: 100%;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				overflow: hidden;
				margin-top: -50rpx;

				.canshubox {
					width: 100%;
					display: flex;
					align-items: center;
					height: 92rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #86909C;

					.ctente {
						width: 686rpx;
						margin: auto;
						font-size: 28rpx;
						line-height: 92rpx;
						border-bottom: 2rpx solid #F2F3F5;
					}
				}

				.spdetail {
					width: 686rpx;
					margin: auto;
					overflow: hidden;
					margin-top: 28rpx;

					.content {
						width: 100%;
						margin-top: 28rpx;

						image {
							width: 100%;
						}
					}

					.titleline {
						width: 202rpx;
						margin: auto;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;

						.imh {
							width: 22.75rpx;
							height: 27.26rpx;
						}
					}
				}

				.jiange {
					width: 100%;
					height: 28rpx;
					background: #F7F8FA;
					margin-top: 24rpx;
				}

				.shangpinfocenter {
					width: 686rpx;
					margin: auto;
					overflow: hidden;

					.open {
						width: 100%;
						text-align: center;
						font-size: 28rpx;
						color: #0077BE;
						margin-top: 30rpx;
						display: flex;
						justify-content: center;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;
						margin-top: 22rpx;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						margin-top: 24rpx;
						/* 限制文本为2行 */
						overflow: hidden;
					}
				}
			}

			.jiageinfo {
				width: 100%;
				overflow: hidden;
				position: relative;
				height: 170rpx;

				.jiageinfoback {
					width: 100%;
					position: absolute;
					z-index: -1;
					height: 170rpx;
				}

				.jiageline {
					width: 686rpx;
					margin: auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 38rpx;

					.gnq {
						display: flex;
						align-items: center;
						margin-right: 18rpx;

						.righttex {
							width: 44rpx;
							height: 44rpx;
							position: relative;
							display: flex;
							border: none !important;
							align-items: center;
							overflow: auto !important;
							background-color: none !important;
							background-size: 100% 138% !important;
							margin-left: 0rpx !important;
							margin-right: 36rpx !important;
							-webkit-tap-highlight-color: none !important;
							margin-right: 0 !important;
							overflow: hidden !important;

							&:after {
								border: none;
								background-color: none !important;
							}

							.rightteximg {
								width: 44rpx;
								height: 44rpx;
								position: absolute;
							}

						}

						image {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.jigae {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;

						.memberjiage {
							padding: 0 20rpx;
							height: 42rpx;
							border-radius: 0rpx 21rpx 21rpx 21rpx;
							background: #FFFFFF;
							text-align: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #2AB4F5;
							margin-left: 20rpx;
							line-height: 42rpx;
						}
					}
				}
			}
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}

	::v-deep .u-swiper {
		border-radius: 0px !important;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	::v-deep .u-swiper__wrapper__item__wrapper__image {
		border-radius: 0px !important;
	}
</style>